<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="description" content="叮叮来钱">
	<meta name="keywords" content="叮叮来钱">
	<title>叮叮来钱</title>
	<meta name="apple-touch-fullscreen" content="yes">
	<meta name="format-detection" content="telephone=no" />
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<style>
		.pay-title {
			text-align: center;
			margin-top: 40px;
		}
		.pay-title img {
			width: 54px;
			height: 54px;
		}

		.pay-title div {
			margin-top:25px;
			font-size: 17px;
			color: #3b3b3b;
		}

		.pay-input-border {
			border-radius:5px;
			border: 1px solid #cacaca;
			background: #ffffff;
			margin: 37px 10px 15px 10px;
			height: 60px;
			padding: 18px 20px 0 15px;
		}

		.pay-input-border span {
			font-size: 24px;
			color: #969696;
		}

		.pay-input-border input {
			margin-top: -3px;
			border: none;
			float: right;
			height: 40px;
			width: 120px;
			text-align: right;
			font-size: 35px;
			color: #000000;
		}

		.pay-company {
			margin-top: 18px;
			text-align: center;
			color: #3b3b3b;
			font-size: 15px;
		}

		.pay-keyboard {
			position: fixed;
			bottom: 0px;
			width: 100%;
		}

		.pay-keyboard-table {
			width: 100%;
			text-align: center;
		}

		.pay-keyboard-table tr {
			width: 100%;
			height: 40px;
		}

		.pay-keyboard-td {
			width: 25%;
			border: 1px solid #cacaca;
			font-size: 20px;
			color: #3b3b3b;
		}

		.pay-button-disable {
			background: #969696;
			font-size: 24px;
			color: #ffffff;
		}

		.pay-button-enable {
			background: #00c701;
			font-size: 24px;
			color: #ffffff;
		}

		.pay-mask {
			position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
			z-index: 1002; left: 0px;
			opacity:0.5; -moz-opacity:0.5;
			text-align: center;
			display: none;
		}

		.pay-mask-span {
			height: 100%;
			display: inline-block;
			vertical-align: middle;
		}

		.pay-mask-image {
			vertical-align: middle;
		}
	</style>
</head>
	<body>
	<div id="mask" class="pay-mask"><span class="pay-mask-span"></span><img src="http://oeb6w1s1c.bkt.clouddn.com/loading.gif" class="pay-mask-image"/></div>
	<div>
		<div class="pay-title">
			<img src="http://oeb6w1s1c.bkt.clouddn.com/pay-logo.png"/>
			<div id="shopName"></div>
		</div>
		<div class="pay-input-border">
			<span>请输入金额</span><input type="text" name="payAmount" id="payAmount" readonly="readonly" value="¥"/>
		</div>
		<div class="pay-company">由叮叮来钱提供支付服务</div>
		<div class="pay-keyboard">
			<table class="pay-keyboard-table">
				<tr>
					<td class="pay-keyboard-td" id="key1">1</td>
					<td class="pay-keyboard-td" id="key2">2</td>
					<td class="pay-keyboard-td" id="key3">3</td>
					<td class="pay-keyboard-td" id="key_del"><img src="http://oeb6w1s1c.bkt.clouddn.com/key_del.png" style="width: 25px; height: 15px; verticalAlign:middle;"/></td>
				</tr>
				<tr>
					<td class="pay-keyboard-td" id="key4">4</td>
					<td class="pay-keyboard-td" id="key5">5</td>
					<td class="pay-keyboard-td" id="key6">6</td>
					<td rowSpan="3" class="pay-button-disable" id="pay-disable-key"><span>确认<br/>支付</span></td>
					<td rowSpan="3" id="pay-enable-key" class="pay-button-enable" style="display: none;"><span >确认<br/>支付</span></td>
				</tr>
				<tr>
					<td class="pay-keyboard-td" id="key7">7</td>
					<td class="pay-keyboard-td" id="key8">8</td>
					<td class="pay-keyboard-td" id="key9">9</td>
				</tr>
				<tr>
					<td colSpan="2" class="pay-keyboard-td" id="key0">0</td>
					<td class="pay-keyboard-td" id="key_dot">.</td>
				</tr>
			</table>
		</div>
	</div>
	</body>
</html>

<script coolie src="/node_modules/coolie.js/coolie.js"
		data-config="/coolie-config.js"
		data-main="weChatPay.js"></script>